<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 
  <meta name="format-detection" content="telephone=no" />
  <link href="/css/style.css" rel="stylesheet" type="text/css" />
  <link href="/css/chooseDate.css" rel="stylesheet" type="text/css" />
  <script src="/js/jquery-1.8.2.min.js"></script>


  <script type="text/javascript">


  </script>
  <title>选择日期</title>
 </head> 
 <body class="b_gray">
 <intput  id="nowDate" type="hidden" th:value="${nowDate}"></intput>
 <intput  id="maxDate" type="hidden" th:value="${maxDate}"></intput>

  <ul class="order_tab1" style="">
   <li class="order_sel days" >今天<span th:text="${nowDate}"></span></li>
   <li class ="days" id="tabDay1">明天<span th:text="${tomorrow}"></span></li>
   <li class ="days" id="tabDay2">后天<span th:text="${afterTomorrow}"></span></li>
   <li class ="days" id="tabDay3">自定义<span></span></li>
  </ul>
  <div id="order_main">
   <ul class="order_time_list" id="day0"> 
    <li usetime="1">上午场(9:00-11:00)</li>
    <li usetime="3">下午场(13:00-15:00)</li>
   </ul>
   <div class="form_area b_gray" id="day3" style="display:none">
    <input type="text" id="datepicker" placeholder="请选择预约日期" style="    float: left;
    width: 92%;
    height: 36px;
    background: #fff;
    margin: 8px 2% 0 0;
    border-radius: 2px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #333;
    border: none;
">
    <script src="/laydate/laydate.js"></script>
   </div>

  </div>
  <form class="order_area"> 
   <div> 
    <p id="sTime"></p> 
    <button type="button" class="btn2" value="确定" onclick="goBackWriteOrder();">确定</button> 
   </div> 
  </form>
 <script>
     $(function(){
         //执行一个laydate实例
         var now = $("#nowDate").attr("value");
         var max = $("#maxDate").attr("value");
         console.log(now);
         laydate.render({
             elem: '#datepicker', //指定元素
             type: 'date',
             format: 'yyyy-MM-dd',
             min:now,
             max:max,
             done: function(value, date, endDate) {
                 console.log(value); //得到日期生成的值，如：2017-08-18
                 console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                 console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。

                 $("#tabDay3 span").text(value);
             }
         });
         $(".days").click(function(){

             $(".days").not($(this)).removeClass("order_sel");
             $(this).addClass("order_sel");
             $("#day0 li").removeClass("order_sel2");
             $("#day3").hide();
         });
         $("#day0 li").click(function(){
             $("#day0 li").removeClass("order_sel2");
             $(this).addClass("order_sel2");
         });
         $("#tabDay3").click(function(){
             $("#day3").show();
         });




     });
     function goBackWriteOrder(){
         var bookDay = $(".order_sel span").text();
         var bookTime = $(".order_sel2").attr("usetime");
         if(bookDay==null||bookDay==undefined||bookDay==""||bookTime==null||bookTime==undefined||bookTime==""){
             alert("请选择预约时间或者预约场次");
             return false;
         }

         sessionStorage.setItem("day",bookDay);
         sessionStorage.setItem("time", bookTime);
         window.location.href="/order/index";

     }
 </script>
 <footer id="footer" class="foot">
  <ul>
   <li>
    <a href="/">
     <span class="img"><img src="/images/nav1.png"></span>
     <p>首页</p>
    </a>
   </li>
   <li>
    <a href="/hot/index">
     <span class="img"><img src="/images/nav2.png"></span>
     <p>动态</p>
    </a>
   </li>
   <li>
    <a href="/order/index">
     <span class="img"><img src="/images/nav3.png"></span>
     <p>预约</p>
    </a>
   </li>
   <li class="active">
    <a href="/user/index">
     <span class="img"><img src="/images/nav4.png"></span>
     <p>我的</p>
    </a>
   </li>
  </ul>
 </footer>
 </body>

</html>